<template>
	<div class="fundmanage">
		<el-container style="width: 100%; height: 100%;">
			<el-aside width="200px" style="background-color: #eaedf2;height: 100%;overflow: auto;">
				<h4>资金管理</h4>
				<el-menu :router="true" default-active="/home/fundmanage/settle" class="el-menu-vertical-demo"
					background-color="#eaedf2" text-color="#333333" active-text-color="#333333">
					<el-menu-item index="/home/fundmanage/settle"
						@click="addTab({name:'/home/fundmanage/settle',title:'结算对账'})">
						<span slot="title">结算对账</span>
					</el-menu-item>
					<el-menu-item index="/home/fundmanage/pay"
						@click="addTab({name:'/home/fundmanage/pay',title:'出款对账单'})">
						<span slot="title">出款对账单</span>
					</el-menu-item>
					<el-menu-item index="/home/fundmanage/shiftin"
						@click="addTab({name:'/home/fundmanage/shiftin',title:'代发转入'})">
						<span slot="title">代发转入</span>
					</el-menu-item>
					<el-menu-item index="/home/fundmanage/presettle"
						@click="addTab({name:'/home/fundmanage/presettle',title:'提前结算'})">
						<span slot="title">提前结算</span>
					</el-menu-item>
					<el-menu-item index="/home/fundmanage/batchsend"
						@click="addTab({name:'/home/fundmanage/batchsend',title:'批量代发'})">
						<span slot="title">批量代发</span>
					</el-menu-item>
					<el-menu-item index="/home/fundmanage/batchget"
						@click="addTab({name:'/home/fundmanage/batchget',title:'批量代收'})">
						<span slot="title">批量代收</span>
					</el-menu-item>
					<el-menu-item index="/home/fundmanage/day"
						@click="addTab({name:'/home/fundmanage/day',title:'日结算对账单下载'})">
						<span slot="title">日结算对账单下载</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main>
				<el-tabs @tab-click="handleClick" v-model="editableTabsValue" type="card" editable
					@edit="handleTabsEdit">
					<el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name">
					</el-tab-pane>
				</el-tabs>
				<router-view></router-view>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 上面的标签页
				// 当前被选中的标签
				editableTabsValue: '/home/fundmanage/settle',
				editableTabs: [{
					title: '结算对账',
					name: '/home/fundmanage/settle',
				}],
				tabIndex: '/home/fundmanage/settle',
			}
		},
		methods: {
			// 删除tab标签
			handleTabsEdit(targetName, action) {
				console.log(targetName, action);
				if (action == "remove") {
					// 找到对应的索引
					var ind = this.editableTabs.findIndex(item => item.name == targetName);
					if (this.editableTabs.length > 1) {
						// 如果当前页面是删除的页面（路由要跳转到其他页面）
						if (this.$route.path == this.editableTabs[ind].name) {
							var i = null;//i 要去的页面
							if (ind >= 1) {
								i = ind - 1;
							} else {
								i = ind + 1;
							}
							// 跳转到第i个页面
							this.$router.push(this.editableTabs[i].name);
						}
						// 删除
						this.editableTabs.splice(ind, 1);
					} else {
						alert("留下一个页面当做参考吧")
					}
				}
			},
			// 添加tab标签
			addTab(tab) {
				var elem = this.editableTabs.find(item => item.name === tab.name);
				if (!elem) {
					this.editableTabs.push(tab);
				}
				// 当前tab应该是被选中的
				this.editableTabsValue = tab.name;
			},
			// 点击tab标签
			handleClick(tab) {
				this.editableTabsValue = tab.name;
				this.$router.push(tab.name)
			}
		}
	}
</script>

<style scoped="scoped">
	.fundmanage {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	h4 {
		padding-left: 20px;
		line-height: 85px;
		height: 85px;
	}

	.is-active {
		background-color: #FFFFFF !important;
	}
</style>
